<template>
  <div class="homepage">
    <div class="carousel-container">
      <el-carousel :interval="4000" type="card" height="90%" initial-index="0" indicator-text="false">
        <el-carousel-item :key="1">
          <router-link :to="{ name: 'realTime' }">
            <div class="slide-image-container">
              <img src="../../assets/home1.png" class="slide-image" />
            </div>
            <div class="slide-text">Slide 1</div>
          </router-link>
        </el-carousel-item>
        <el-carousel-item :key="2">
          <router-link :to="{ name: 'ElderList'}">
            <div class="slide-image-container">
              <img src="../../assets/home2.png" class="slide-image" />
            </div>
            <div class="slide-text">Slide 2</div>
          </router-link>
        </el-carousel-item>
        <el-carousel-item :key="3">
          <router-link :to="{ name: 'personnel'}">
            <div class="slide-image-container">
              <img src="../../assets/home3.png" class="slide-image" />
            </div>
            <div class="slide-text">Slide 3</div>
          </router-link>
        </el-carousel-item>
        <el-carousel-item :key="4">
          <router-link :to="{ name: 'abnormal'}">
            <div class="slide-image-container">
              <img src="../../assets/home4.png" class="slide-image" />
            </div>
            <div class="slide-text">Slide 3</div>
          </router-link>
        </el-carousel-item>
      </el-carousel>
    </div>

    <div class="info-section">
      <div class="parallax">
        <div class="info-text">
          <h2>异常行为监测</h2>
          <p>监控是否有人摔倒、吸烟、打架，保障安全。</p>
        </div>
      </div>
      <div class="parallax-two">
        <div class="info-text">
          <h2>老人护工建档</h2>
          <p>记录老人身体健康情况，防范于未然。</p>
        </div>
      </div>
      <div class="parallax-three">
        <div class="info-text">
          <h2>智能采录识别</h2>
          <p>使用先进的识别技术，确保人员进出安全。</p>
        </div>
      </div>
      <div class="parallax-four">
        <div class="info-text">
          <h2>安防入侵警报</h2>
          <p>监控指定区域，防止人员进入危险区域。</p>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.carousel-container {
  width: 100%;
  height: 90vh;
  background: #fffeec;
}

.slide-image-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.slide-image {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.info-section {
  width: 100%;
}

.parallax,
.parallax-two,
.parallax-three,
.parallax-four {
  position: relative;
  background-image: url("@/assets/home1.png");
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.parallax-two {
  background-image: url("@/assets/home2.png");
}

.parallax-three {
  background-image: url("@/assets/home3.png");
}

.parallax-four {
  background-image: url("@/assets/home4.png");
}

.info-text {
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
}

.info-text h2 {
  margin: 0;
  font-size: 2.5em;
}

.info-text p {
  margin: 10px 0 0;
  font-size: 1.2em;
}
</style>

<script setup lang="ts">
</script>
